const path=require('path');
//VUE对应下面 plugins
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports={
	//入口起点：
	entry:{//入口文件
		main:'./src/main.js'
	},
	mode:'development', //打包模式

	//输出文件（打包之后的）
	output:{
		filename:'[name].js',//输出的文件名  [name].js 代表输入的名字是什么，输出的名字就是什么
		path: path.resolve(__dirname, './dist'),//输出地址
		publicPath:'/' //代理路径（相当于静态资源） 指向服务器缓存的路径
	},

	// 开启服务
	devServer:{//启动完成时，直接打开dist中的index.html文件  热更新
		// contentBase:'./dist',//指向默认打开文件
		overlay:true,//把报错直接显示到浏览器中
		host:'',  //真机测试
	},//所有经过html的文件，都有热更新；

	//vue:
	plugins: [
		// 请确保引入这个插件
		new VueLoaderPlugin()
	  ],

	//配置vue、css、html、图片文件loader（加载器）
	 module:{
		//VUE
		 rules:[
			{
				test:/\.vue$/,
				loader:'vue-loader'
			},
			// 配置css打包：
			{
				test:/\.css$/,//正则css
				use:[
					{loader:'style-loader'},
					{loader:'css-loader'},
				]
			},
			// 配置html打包：
			{
				test:/\.html$/,
				use:[
					{loader:'file-loader',options:{name:'[name].html'}},//输出的文件名 将html分离出去
					{loader:'extract-loader'},//用于分离文件的
					{loader:'html-loader'}
				]
			},
			//配置图片打包：
			{
				test:/\.(jpg|png|gif)$/,//多个写法
				use:[
					{loader:'file-loader',options:{name:'[name]-[hash:8].[ext]'}}//输出文件，图片也需要输出
				]
				//注：图片走的也是代理路径  [hash:8] 设置8位的哈希值
			}
		 ]
	 },
	
}
// css会直接打包到js中，不产生css文件；
// 但是必须要生成html文件，为了默认加载index.html文件，需要分离html


//真实打包完成的（你看到他已经输出的一个文件）
//服务器状态下的模拟打包
//每次webpack更新，都要重新启动一下指令
//webpack的一个最主要原因是为了简化页面依赖的管理，并且通过将其打包为一个文件来降低页面加载时请求的资源数。



 //webpack的主要原理是，
	 //它将所有的资源都看成是一个模块，并且把页面逻辑当作一个整体，通过一个给定的入口文件，
	 //webpack 从这个文件开始，找到所有的依赖文件，将各个依赖文件模块通过 loader 和 plugins 处理后，然后打包在一起，最后输出一个浏览器可识别的JS文件。

//Webpack 具有五个核心的概念，
	//Entry入口        从那个文件开始打包项目 
	//Output输出       打包后  输出到哪里  以及命名 
	//loader和         只能处理js json   所有需要loader翻译非js文件  
	//Plugins插件      范围更广的任务    优化 压缩
	//mode   模式	   生产/开发 模式 

/*Entry
		 是webpack的入口起点，它指示webpack应该从哪个模块开始着手 来作为其构建内部依赖图的开始。
  Output
  		 属性告诉webpack在哪里输出它所创建的打包文件，也可指定打包文件的名称，默认位置为 ./dist。
  loader 
		可以理解为 webpack 的编译器，它使得 webpack 可以处理一些非 JavaScript 文件。在对 loader 进行配置的时候，test 属性，标志有哪些后缀的文件应该被处理，是一个正则表达式。
		use 属性，指定 test 类型的文件应该使用哪个 loader 进行预处理。常用的 loader 有 css-loader、style-loader 等。
插件可以用于执行范围更广的任务，包括打包、优化、压缩、搭建服务器等等，要使用一个插件，一般是先使用 npm 包管理器进行安装，然后在配置文件中引入，最后将其实例化后传递给 plugins 数组属性。
使用 webpack 的确能够提供我们对于项目的管理，但是它的缺点就是调试和配置起来太麻烦了。但现在 webpack4.0 的免配置一定程度上解决了这个问题。但是我感觉就是对我来说，就是一个黑盒，很多时候出现了问题，没有办法很好的定位。*/





